<template>
    <div class="container_box">
        <div class="main_box">
            <div class="content">
                <el-scrollbar class="scrollbar_left">
                    <div class="content-left">
                        <div class="list_item mt20">
                            <div class="item_title"><span class="title_icon"></span>入群欢迎语配置</div>
                            <MaterialContent
                                ref="materialContentRef"
                                :max-num="1"
                                :input-content-tabs="inputContentTabs"
                                :show-material-tabs="showMaterialTabs"
                                :input-content-data="inputContentData"
                                :material-content-data="materialContentData"
                                :placeholder="'请输入欢迎语'"
                                @change="changeMaterial" />
                        </div>
                    </div>
                </el-scrollbar>
                <el-scrollbar class="scrollbar_right">
                    <div class="content-right">
                        <div class="title">欢迎语预览</div>
                        <PhonePreview ref="phonePreviewRef" />
                    </div>
                </el-scrollbar>
            </div>
        </div>

        <div class="footer_box">
            <el-button @click="resetForm">取消</el-button>
            <el-button v-if="button === 'onSubmit'" type="primary" @click="noticeSend">保存</el-button>
            <el-button v-if="button === 'onUpload'" type="primary" @click="UploadFun(1)">修改</el-button>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onBeforeMount, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import MaterialContent from '@/components/zw/materialContent1.0/index.vue';
import PhonePreview from '@/components/zw/phonePreview1.0/welcomePhonePreview/materialPreview/index.vue';

import { channelGroupCreate, channelGroupInfo, channelGroupUpdate } from '@/api/channel/qwbase';
import { initMaterialData } from '@/utils/utils';
import router from '@/router';

const materialContentRef = ref<HTMLElement | null>();
const phonePreviewRef = ref<HTMLElement | null>();
const inputContentTabs = ref<Array<number>>([1, 2, 7]); // 配置欢迎语输入框选项
const showMaterialTabs = ref<Array<string>>(['1', '2', '3', '4', '5', '7', '9', '11', '10']); // 配置选择素材组件类型
const inputContentData = ref<string>(''); //  用户存放回显数据  欢迎语输入框
const materialContentData = ref<Array<any>>([]); //  用户存放回显数据  欢迎语素材
const materialResult = ref<any>(null);
const button = ref('onSubmit');
const addGroup = ref({
    welcome_groupchat_id: 0
});
onMounted(() => {
    GetDetails();
});
const changeMaterial = (val: any) => {
    materialResult.value = val;
};
// 取消
const resetForm = () => {
    router.push({ path: '/channel/qwbasicoperation/welcomegroup' });
};
// 通知员工发送
const noticeSend = () => {
    if (!materialResult.value?.welcome_info?.welcome_text) {
        ElMessage.warning('请输入欢迎语');
        return;
    }
    channelGroupCreate(materialResult.value).then((res: any) => {
        ElMessage.success('创建成功');
        router.push({ path: '/channel/qwbasicoperation/welcomegroup' });
    });
};
const UploadFun = (foce: number) => {
    const params = {
        ...materialResult.value,
        force: foce,
        welcome_groupchat_id: addGroup.value.welcome_groupchat_id
    };
    channelGroupUpdate(params)
        .then((res: any) => {
            ElMessage.success('修改成功');
            router.push({ path: '/channel/qwbasicoperation/welcomegroup' });
        })
        .catch((err: any) => {
            if (err.code == 51042) {
                ElMessageBox.alert(
                    '<span>该欢迎语已被客户在企业微信后台删除，您无法继续操作！点击“继续创建”后，将删除此欢迎语并创建新的欢迎语；点击“我知道了”，将返回列表，请手动删除该欢迎语。</span>',
                    '提示',
                    {
                        dangerouslyUseHTMLString: true,
                        showCancelButton: true,
                        confirmButtonText: '继续创建',
                        cancelButtonText: '我知道了'
                    }
                )
                    .then(() => {
                        UploadFun(2);
                    })
                    .catch(() => {
                        router.push({ path: '/channel/qwbasicoperation/welcomegroup' });
                    });
                return;
            }
        });
};
const GetDetails = () => {
    const id = router.currentRoute.value.query.id;
    if (!id) return;
    button.value = 'onUpload';
    addGroup.value.welcome_groupchat_id = Number(id);
    channelGroupInfo({ welcome_groupchat_id: id }).then((res: any) => {
        inputContentData.value = res.welcome_info.welcome_text;
        materialContentData.value = initMaterialData(res.welcome_info.welcome_material);
    });
};
</script>
<style lang="scss" scoped>
.content {
    height: 100%;
    padding: 24px;
    box-sizing: border-box;
    display: flex;

    .scrollbar_left {
        flex: 1;
        border-right: 1px solid #eee;
    }

    .content-left {
        flex: 1;
        height: 100%;
        padding-right: 48px;

        .list_item {
            padding-left: 1.125rem;
            padding-bottom: 24px;
            border-bottom: 0.0625rem solid #eaeaea;

            &:last-of-type {
                border-bottom: none;
            }

            .item_title {
                font-size: 0.875rem;
                line-height: 1.125rem;
                font-family: STHeitiSC-Medium, STHeitiSC;
                font-weight: 500;
                color: #33302d;
                margin-bottom: 12px;

                .title_icon {
                    display: block;
                    height: 1.125rem;
                    width: 0.1875rem;
                    background: #ff6b00;
                    float: left;
                    margin-left: -0.9375rem;
                }
            }
        }

        .mt20 {
            margin-top: 1.25rem;
        }
    }

    .content-right {
        padding: 24px 24px 0 48px;

        .title {
            text-align: center;
            line-height: 3.5;
            font-size: 14px;
            color: #333;
        }
    }
}

.bottom-btns {
    .btns {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>
